<template>
  <div class="mapbj">
    <img src="@/assets/img/home/pingyang.png" width="787" height="413" usemap="#Map" border="0" style="width: 49.1875rem; height: 25.8125rem;" />
    <map name="Map" id="Map">
      <!-- 顺溪镇 -->
      <div class="shunxi map_icon" @click="switchMaptwo(1, '顺溪镇','330326108000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="111,60,127,70,144,94,146,117,144,139,147,159,174,188,171,208,153,228,87,259,79,222,13,167,13,151,31,144,77,123,92,70,101,59" />
      </div>
      <!-- 山门镇 -->
      <div class="shanmen map_icon" @click="switchMaptwo(2, '山门镇','330326107000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="110,56,118,51,120,27,134,15,150,20,158,37,175,52,247,40,259,43,273,37,288,130,300,154,301,166,296,174,283,165,256,159,238,158,209,163,188,172,176,178,158,164,149,137,152,117,152,102,147,85,136,71,121,62"
        />
      </div>
      <!-- 南雁镇 -->
      <div class="nanyan map_icon" @click="switchMaptwo(3, '南雁镇','330326109000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="176,184,191,175,212,167,234,163,253,162,278,169,292,178,301,196,304,212,293,227,272,239,249,245,220,252,198,252,193,239,185,234,165,229,156,229,170,214,171,200"
        />
      </div>
      <!-- 水头镇 -->
      <div class="shuitou map_icon" @click="switchMaptwo(4, '水头镇','330326102000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="289,36,302,37,314,55,335,101,343,117,346,162,363,183,390,193,424,179,458,144,470,171,488,172,474,187,442,232,421,221,400,225,387,239,363,277,360,316,339,312,317,306,248,329,221,302,207,293,209,259,243,255,272,245,300,228,311,213,307,186,298,178,303,159,295,135,291,111,285,81,282,50"
        />
      </div>
      <!-- 腾蛟镇 -->
      <div class="tengjiao map_icon" @click="switchMaptwo(5, '腾蛟镇','330326105000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="464,131,458,114,443,87,426,67,415,61,410,57,393,73,377,73,358,68,351,53,329,58,323,55,329,27,329,16,323,9,298,30,312,47,324,62,337,89,344,110,345,138,353,152,356,168,367,180,391,188,420,179,443,157"
        />
      </div>
      <!-- 麻步镇 -->
      <div class="mabu map_icon" @click="switchMaptwo(6, '麻步镇','330326120000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="418,328,427,319,440,309,451,307,463,293,463,275,451,251,439,239,422,230,409,229,390,241,382,252,377,273,370,287,367,302,363,313,390,321" />
      </div>
      <!--萧江镇  -->
      <div class="xiaojiang map_icon" @click="switchMaptwo(7, '萧江镇','330326103000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="419,335,421,354,419,379,441,395,470,397,487,373,495,356,496,343,494,318,480,296,467,289,462,304,446,320,447,318,435,319,421,332" />
      </div>
      <!-- 鳌江镇-->
      <div class="aojiang map_icon" @click="switchMaptwo(8, '鳌江镇','330326101000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="490,174,447,235,463,253,462,273,480,283,490,303,496,322,499,357,518,393,545,375,561,365,588,370,602,389,622,403,652,406,672,402,702,397,720,386,733,365,745,349,704,349,678,328,661,340,653,343,626,341,600,310,550,219,545,211,523,205,509,194,499,180"
        />
      </div>
      <!-- 昆阳镇-->
      <div class="kunyang map_icon" @click="switchMaptwo(9, '昆阳镇','330326100000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="570,200,613,153,632,166,668,201,670,217,671,243,671,312,659,334,647,339,626,334,607,306,585,279,551,210" href="#kunyang" />
      </div>
      <!-- 万全镇-->
      <div class="wanquan map_icon" @click="switchMaptwo(10, '万全镇','330326117000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="633,161,649,139,669,127,702,132,727,157,735,178,745,201,728,214,705,231,749,256,772,277,779,292,772,309,744,346,740,341,706,347,676,319,673,282,672,250,677,223,678,204"
        />
      </div>
    </map>
  </div>
</template>

<script>
export default {
  name: 'MapPingYang',

  data () {
    return {
      qxname: '平阳县',
      category: false,
      isActive: 1,
      cityThreeType: '8',
      cityThreeTitle: '',
      Hqlrsl: [],
      qxcode: '330326000000'
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 12.获取老人数量(会按照地区自动分类
      this.$http.post(this.$api.Hqlrsl.hqlrsl, this.qxcode, true).then(result => {
        let arr = result.data.response.countTotalRegionDoctor
        // console.log('12.获取老人数量(会按照地区自动分类)', arr);
        for (let val of arr.values()) {
          this.Hqlrsl.push(val.num)
        }
      })
    },
    switchMaptwo (cityThreeType, cityThreeName, cityThreeJdCode) {
      var _this = this
      setTimeout(function () {
        console.log('cityThreeType(Map)' + cityThreeType)
        console.log('cityThreeName(Map)' + cityThreeName)
        _this.$router.push({
          path: '/AreaThreeComponents',
          name: 'AreaThreeComponents',
          query: {
            key: 'key',
            cityThreeTypeKey: cityThreeType,
            cityThreeTitleKey: cityThreeName,
            cityThreeJdCodeKey: cityThreeJdCode,
            cityThreeQxcodeKey: _this.qxcode,
            cityThreeQxnameKey: _this.qxname

          }
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.mapbj {
  position: absolute;
  top: 20.5%;
  left: 30%;
  //地图点
  .map_icon {
    color: #214494;
    font-style: italic;:hover{color: #fff;
font-size: 1.375rem; }
    width: 7rem;
    height: 7rem;
    line-height: 2.4rem;
    text-align: center;
    background: url(../../../assets/img/home/2.png) no-repeat center;
    background-size: 100% 100%;
  }
}

.shunxi {
  position: absolute;
  top: 12%;
  left: 5%;
}
.shanmen {
  position: absolute;
  top: 0%;
  left: 15%;
}
.nanyan {
  position: absolute;
  top: 30%;
  left: 20%;
}
.shuitou {
  position: absolute;
  top: 38%;
  left: 35%;
}
.tengjiao {
  position: absolute;
  top: 0%;
  left: 40%;
}
.mabu {
  position: absolute;
  top: 48%;
  left: 44%;
}
.xiaojiang {
  position: absolute;
  top: 67%;
  left: 50%;
}
.aojiang {
  position: absolute;
  top: 57%;
  left: 59%;
}
.kunyang {
  position: absolute;
  top: 41%;
  left: 71%;
}
.wanquan {
  position: absolute;
  top: 50%;
  left: 83%;
}
</style>
